// 全局样式
.van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title {
    color: #fff;
  }
}
/** 最外层的容器撑满整个屏幕 **/
#app {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
/** .container是Layout.vue组件的根元素的类名 **/
.container {
  width: 100%;
  height: 100%;
}
/** .index 是home/home.vue组件的根元素的类名 **/
.index {
  height: 100%;
  // 顶部在导航条是固定定位的，让出顶部导航条的距离
  padding-top: 46px;
  .van-tabs {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
    .van-tabs__wrap {
      position: fixed;
      top: 46px;
      /** 跟在顶部固定导航条的下方 **/
      left: 0px;
      right: 30px;
      /** 高亮当前选中频道的下划线 **/
      .van-tabs__line {
        width: 30px !important;
        background-color: #3296fa;
        bottom: 20px;
      }
    }
    .van-tabs__content {
      flex: 1;
      overflow: hidden;
      padding-bottom: 4rem; /** 能看到文章列表中的loading效果 **/
      .van-tab__pane {
        height: 100%;
        /** .scroll-wrapper 是home/ArticleList.vue组件的根元素的类名 **/
        .scroll-wrapper {
          overflow: auto;
          height: 100%;
        }
      }
    }
  }
}
